<template>
  <div class="metaChoiceList">
    <div class="metaChoiceList_title">
      {{ title }}
      <el-button v-if="titleBtn && titleBtn !== ''" size="mini" class="metaChoiceList_titleBtn" @click="topBtnClick">{{
        titleBtn
      }}</el-button>
    </div>
    <div class="metaChoiceList_tree">
      <div
        v-for="(item, index) in myListData"
        :key="index"
        :class="
          chooseData.id && chooseData.id === item.id
            ? 'metaChoiceListTree_item metaChoiceListTree_itemSelect'
            : 'metaChoiceListTree_item'
        "
      >
        <div :class="!treeBtn.ifDelete && !treeBtn.ifEdit ? 'metaChoiceListTree_itemTitleFull' : 'metaChoiceListTree_itemTitle'" @click.prevent="handleNodeClick(item)">{{ item.name }}</div>
        <i v-if="treeBtn.ifDelete" class="el-icon-delete metaChoiceListTree_itemOptionBtn" @click="deleteBtnClick(item)"/>
        <i v-if="treeBtn.ifEdit" class="el-icon-edit metaChoiceListTree_itemOptionBtn" @click="editBtnClick(item)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MetaChoiceList',
  mixins: [],
  props: {
    title: {
      type: String,
      default: ''
    },
    titleBtn: {
      type: String,
      default: ''
    },
    treeBtn: {
      type: Object,
      default: function() {
        return { ifEdit: true, ifDelete: true }
      }
    },
    listData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chooseData: {},
      myListData: []
    }
  },
  watch: {
    listData: {
      handler: function(newVal, oldVal) {
        this.myListData = JSON.parse(newVal)
      },
      deep: true
    }
  },
  created() {},
  mounted() {
    this.chooseData = {}
  },
  methods: {
    handleNodeClick(item) {
      this.chooseData = item
      this.$emit('roloeItemChoose', item)
    },
    topBtnClick() {
      this.$emit('topBtnClick', this.chooseData)
    },
    editBtnClick(item) {
      this.$emit('editBtnClick', item)
    },
    deleteBtnClick(item) {
      this.$emit('deleteBtnClick', item)
    },
    setChoiceRole(item) {
      this.chooseData = item
    }
  }
}
</script>
<style lang="less">
.metaChoiceList {
  box-sizing: border-box;
  width: 228px;
  margin: 0 8px;
  padding: 15px;
  border: 1px solid #e4eaec;
  border-radius: 6px;
  float: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  .metaChoiceList_title {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    border-bottom: 1px solid rgb(228, 234, 236);
    .metaChoiceList_titleBtn {
      margin-left: 6px;
      padding: 7px 10px;
      float: right;
    }
  }
  .metaChoiceList_tree {
    width: 100%;
    height: 100%;
    overflow: scroll;
    .metaChoiceListTree_item {
      height: 30px;
      line-height: 30px;
      cursor: pointer;
      padding: 0 6px;
      .metaChoiceListTree_itemTitle {
        width: 150px;
        height: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #9b9b9b;
      }
      .metaChoiceListTree_itemTitleFull {
        width: 100%;
        height: 100%;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: #9b9b9b;
      }
      .metaChoiceListTree_itemOptionBtn {
        color: #9b9b9b;
        font-size: 12px;
        cursor: pointer;
        float: right;
        margin-top: 9px;
        margin-left: 4px;
      }
    }
    .metaChoiceListTree_item:hover {
      background-color: #f5f7fa;
    }
    .metaChoiceListTree_itemSelect {
      background-color: #f3fcff;
    }
  }
  .metaChoiceList_tree::-webkit-scrollbar {
    display: none;
  }
}
</style>
